//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent } from 'react';
import {
    Row,
    Col,
    Form,
    Input,
    Select,
    Button,
    Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;


//查看表单
@Form.create()
class ViewForm extends PureComponent {
    static defaultProps = {
        handleViewModalVisible: () => {},
    values: {},
};

constructor(props) {
    super(props);

    this.state = {
        formVals: {
            id: props.values.id,
            user_id: props.values.user_id,
            province_code: props.values.province_code,
            province_name: props.values.province_name,
            city_code: props.values.city_code,
            city_name: props.values.city_name,
            county_code: props.values.county_code,
            county_name: props.values.county_name,
            details_address: props.values.details_address,
            is_defalut: props.values.is_defalut,
        },
    };


}



renderContent = (formVals) => {
    const { form } = this.props;

    return (
        <Form  layout="vertical" hideRequiredMark>

                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="省">
                        {form.getFieldDecorator('province_code', {
                        rules: [{ required: true, message: '请输入至少五个字符的省！', min: 5 }],
                        initialValue: formVals.province_code,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="省名称">
                        {form.getFieldDecorator('province_name', {
                        rules: [{ required: true, message: '请输入至少五个字符的标签名称！', min: 5 }],
                        initialValue: formVals.province_name,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                        </Row>

                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="市">
                        {form.getFieldDecorator('city_code', {
                        rules: [{ required: true, message: '请输入至少五个字符的市！', min: 5 }],
                        initialValue: formVals.city_code,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="市名称">
                        {form.getFieldDecorator('city_name', {
                        rules: [{ required: true, message: '请输入至少五个字符的市名称！', min: 5 }],
                        initialValue: formVals.city_name,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                        </Row>

                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="县">
                        {form.getFieldDecorator('county_code', {
                        rules: [{ required: true, message: '请输入至少五个字符的县！', min: 5 }],
                        initialValue: formVals.county_code,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="县名称">
                        {form.getFieldDecorator('county_name', {
                        rules: [{ required: true, message: '请输入至少五个字符的县名称！', min: 5 }],
                        initialValue: formVals.county_name,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                        </Row>

                        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



                    <Col  md={12} sm={24}>
                    <FormItem  label="地址">
                        {form.getFieldDecorator('details_address', {
                        rules: [{ required: true, message: '请输入至少五个字符的地址！', min: 5 }],
                        initialValue: formVals.details_address,
                        })(<Input  readOnly placeholder="请输入" />)}
                    </FormItem>
                    </Col>



                    <Col  md={12} sm={24}>
                    <FormItem  label="是否默认">
                        {form.getFieldDecorator('is_defalut', {
                        rules: [{ required: true, message: '请输入至少五个字符的是否默认！', min: 5 }],
                        initialValue: formVals.is_defalut,
                        })(
	                         <Select placeholder="请选择" style={{ width: '100%' }}>
	                             <Option value="1">是</Option>
	                             <Option value="0">否</Option>
	                         </Select>
                         )}
                    </FormItem>
                    </Col>

                </Row>



    </Form>
);

};



render() {
    const { viewModalVisible, handleViewModalVisible, values } = this.props;
    const { formVals } = this.state;

    return (
        <Modal
    width={800}
    height={800}
    bodyStyle={{ padding: '32px 40px 48px' }}
    destroyOnClose
    title="查看"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false, values)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false, values) }>取消</Button>}
>

    {this.renderContent(formVals)}
</Modal>
);
}

}

export default ViewForm;



